<template>
  <view>
    <view class="page">
      <view class="section_3">
        
        <view class="box_2">

          <file :pdfImage=pdfImage W='568rpx' H='1200rpx' @swiperChange='swiperChange'></file>
          <view class="box_4">
            <view class="text-wrapper_1">
              <text lines="1" class="text_2">{{page.pagNo+1||1}}/{{pdfImage.length}}</text>
            </view>
          </view>
          <view class="text-wrapper_3">
            <text lines="1" class="paragraph_1">展示已完成</text>
            <text lines="1" class="paragraph_1">或者已拒签</text>
            <text lines="1" class="paragraph_1">或者已拒签</text>
          </view>
          <!-- <view class="box_5">
            <view class="group_4"></view>
            <view class="group_5"></view>
          </view> -->
        </view>
        <view class="image-wrapper_2">
          <image src="/static/-.png" class="image_5"></image>
          <image src="/static/+.png" class="image_6" @click="clickImg()"></image>
        </view>
        <view class="box_3"></view>
      </view>
    </view>
  </view>
</template>


<script>
  export default {
    data() {
      return {
        file:{},
        page:{
          pagNo:0,
          pages:0
        }//轮播图页数
      }
    },
    onLoad() {
      let file = uni.getStorageSync('file')
      this.file=file
    },
    mounted() {
      this.getPDFImage()
      console.log('子节点',this.$children)
    },
    methods: {
      swiperChange(e) { 
        this.page=e
      },
      //访问服务器pdf切图返回
      getPDFImage(){
        let param={
          fileId:this.file.fileInfo.fileId
        }
        this.$store.dispatch('contract/getPDFImage',param)
      },
      //放大图片
      clickImg() {
        wx.previewImage({
          urls: [this.pdfImage[this.page.pagNo].url],
          current: '', // 当前显示图片的http链接，默认是第一个
          success: function(res) {},
          fail: function(res) {},
          complete: function(res) {},
        })
      },
    },
    computed:{
      pdfImage(){
        let PDFImages=this.$store.state.contract.pdfImage
        return PDFImages||[]
      }
      
    }
  }
</script>


<style lang="scss">
  .accomplishFile {
    height: 1200rpx;
    width: 568rpx;
    position: absolute;
  }

  .page {
    background-color: rgba(255, 255, 255, 1.000000);
    position: relative;
    width: 750rpx;
    height: 1475rpx;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }


  .section_3 {
    background-color: rgba(242, 242, 242, 1.000000);
    width: 750rpx;
    height: 1478rpx;
    display: flex;
    flex-direction: column;
  }

  .box_2 {
    background-color: rgba(255, 255, 255, 1.000000);
    border-radius: 10rpx;
    height: 1200rpx;
    border: 2px solid rgba(196, 176, 129, 1);
    width: 568rpx;
    display: flex;
    flex-direction: column;
    margin: 83rpx 0 0 92rpx;
  }

  .box_4 {
    width: 52rpx;
    height: 27rpx;
    display: flex;
    flex-direction: row;
    margin: 21rpx 0 0 501rpx;
  }

  .text-wrapper_1 {
    background-color: rgba(204, 204, 204, 1.000000);
    border-radius: 10rpx;
    height: 27rpx;
    display: flex;
    flex-direction: column;
    width: 52rpx;
    position: absolute;
  }

  .text_2 {
    width: 26rpx;
    height: 16rpx;
    overflow-wrap: break-word;
    color: rgba(254, 254, 254, 1);
    font-size: 18rpx;
    font-family: Adobe Heiti Std R;
    text-align: left;
    white-space: nowrap;
    line-height: 24rpx;
    margin: 5rpx 0 0 13rpx;
  }

  .text-wrapper_3 {
    width: 369rpx;
    height: 212rpx;
    // display: flex;
    // flex-direction: row;
    margin: 228rpx 0 0 99rpx;
    position: absolute;
  }

  .paragraph_1 {
    width: 369rpx;
    height: 212rpx;
    color: rgba(204, 204, 204, 1);
    font-size: 72rpx;


  }

  .box_5 {
    width: 60rpx;
    height: 16rpx;
    flex-direction: row;
    display: flex;
    justify-content: space-between;
    position: absolute;
    bottom: 216rpx;
    left: 345rpx;
  }

  .group_4 {
    background-color: rgba(200, 165, 86, 1.000000);
    border-radius: 50%;
    width: 16rpx;
    height: 16rpx;
    display: flex;
    flex-direction: column;
  }

  .group_5 {
    background-color: rgba(192, 192, 192, 1.000000);
    border-radius: 50%;
    width: 16rpx;
    height: 16rpx;
    display: flex;
    flex-direction: column;
  }

  .image-wrapper_2 {
    width: 145rpx;
    height: 49rpx;
    flex-direction: row;
    display: flex;
    justify-content: space-between;
    margin: 55rpx 0 0 512rpx;
  }

  .image_5 {
    width: 48rpx;
    height: 48rpx;
    margin-top: 1rpx;
  }

  .image_6 {
    width: 48rpx;
    height: 48rpx;
  }

  .box_3 {
    background-color: rgba(242, 242, 242, 1.000000);
    border-radius: 1rpx;
    width: 2rpx;
    height: 70rpx;
    display: flex;
    flex-direction: column;
    margin: 0 0 13rpx 374rpx;
  }
</style>
